<#include "../common/header.htm">
<section class="content">
    <div class="row">
        <div class="col-md-2">
           <div class="panel-heading titlet">
                <span class="panel-title titleTex">标题</span>
            </div>
            <div class="panel-group" id="accordion">
                <#list titleList as tl>
                <div onclick="datalog.query(${tl.id!})" class="panel panel-default">
                    <div class="panel-heading" style="cursor:pointer;">
                        ${tl.mappingField!}
                    </div>
                </div>
                </#list>
    </div>
    </div>
    <div class="col-md-10">
        <div class="titleRight">
            <div class="titlerbt">各银行标题</div>
            <button class="btn btn-primary addtitbtn" data-toggle="modal" data-target="#myModal">新增标题</button>
        </div>
        <!--<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">新增标题</button>-->
        <table id="tb_customer" style="table-layout: fixed;">
            <thead>
            <tr>
                <th data-field="bankTitleName" style="font-size:18px;">各银行标题</th>
                <th class="caozuo" data-field="caozuo" style="font-size:18px;text-align: center">操作</th>
            </tr>
            </thead>
        </table>
        </div>
    </div>     
</section>
<!-- 模态框（） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">添加标题</h4>
            </div>
            <div class="modal-body">
                <form id="addtitlepoolform" enctype="multipart/form-data" method="post" class="form-horizontal" role="form">
                    <div class="form-group">
                        <label for="titleSelect" class="col-sm-5 control-label">请选择对应的标题名称：</label>
                        <div class="col-sm-7">
                            <select name="titleId" id="titleSelect" class="form-control"></select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="lastname" class="col-sm-5 control-label">标题名称：</label>
                        <div class="col-sm-7">
                            <input name="bankTitleName" type="text" class="form-control" id="lastname" placeholder="请输标题">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button onclick="saveAddData()" type="button" class="btn btn-primary" data-dismiss="modal">提交</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<script src="${ctx}/bower_components/assets/confirm/confirmUtils.js"></script>
<script type="text/javascript">
    $(function () {
        $.ajax({
            url: "${ctx}/bill/titlepool/titleList",
            type: "get",
            async:false,
            dataType:'json',
            success:function (obj) {
                var select = $("#titleSelect");
                var open = "";
                $.each(obj ,function (i,n) {
                    open +='<option value='+n.id+'>'+n.mappingField+'</option>';
                });
                select.html(open);
            }
        });
        datalog.query($("#titleSelect").val());
    })


    function saveAddData() {

        $.ajax({
            type: "POST",
            url: "${ctx}/bill/titlepool/saveAdd",
            data:$("#addtitlepoolform").serialize(),
            dataType:'json',
            success: function(obj){
                toastr.success(obj.data.msg);
                $("#lastname").val('');
                $('#tb_customer').bootstrapTable("refresh",{
                    url:"${ctx}/bill/titlepool/titlepool",
                    query: {'id': $("#titleSelect").val()},
                })
            }
        });
    }
    
    var datalog = {
        query : function (id) {
            var mytab = $('#tb_customer');
            mytab.bootstrapTable('destroy');
            mytab.bootstrapTable({
                url: "${ctx}/bill/titlepool/titlepool?id="+id,//数据源
                search: false,//是否搜索
                dataType: "json",//期待返回数据类型
                method: "get",//请求方式
                data_locale: 'zh-CN',
                toolbar: '#toolbar', //工具按钮用哪个容器
                striped: true,//隔行换色
                columns: [
                    {
                        field: "bankTitleName",
                        title: "各银行标题",
                    },
                    {
                        title: '操作',
                        width: 120,
                        formatter: function (value, row, index) {
                            var result = "";
                            result += '<a onclick="delTitle('+row.id+','+id+')" style="cursor:pointer;">删除</a>';
                            return result;
                        }

                    }
                ],
                /**
                 * @param {点击列的 field 名称} field
                 * @param {点击列的 value 值} value
                 * @param {点击列的整行数据} row
                 * @param {td 元素} $element
                 */
                onDblClickCell: function(field, value, row, $element) {
                    $element.attr('contenteditable', 'true');
                    $element.blur(function() {
                        $element.attr('contenteditable', 'false');
                        var tdValue = $element.html();

                        saveData(row.id , tdValue,row.titleId);
                    })
                },
                onLoadSuccess:function () {
                    $("#titleSelect option[value="+id+"]").attr("selected", true);
                }
            });
        }

    };
    function delTitle(id,titleid) {
        Ewin.confirm({ message: "确认要删除这条数据吗？" }).on(function (e) {
            if (!e) {
                return;
            }
            $.ajax({
                type: "POST",
                url: "${ctx}/bill/titlepool/delete",
                data:{"id":id,},
                dataType:'json',
                success: function(data){
                    console.log(data);
                    $('#tb_customer').bootstrapTable('refresh',{
                        url:"${ctx}/bill/titlepool/titlepool",
                        query: {'id': titleid},
                    });
                }
            });
        });
    }

    function saveData(id, value,titleid) {
        $.ajax({
            type: "POST",
            url: "${ctx}/bill/titlepool/saveUpdate",
            data:{"id":id,"bankTitleName":value},
            dataType:'json',
            success: function(obj){
                var data = obj.data;
                $('#tb_customer').bootstrapTable('refresh',{
                    url:"${ctx}/bill/titlepool/titlepool",
                    query: {'id': titleid},
                });
                if (data.msg=="修改成功") {
                    toastr.success("修改成功");
                }else {
                    toastr.error("没有修改此条记录权限！");
                }
            }
        });
    }

</script>
<style>
    .fixed-table-container {
        height: 770px;
        border-radius: 0;
    }
    div#accordion {
        height: 770px;
        overflow-y: auto;
    }
    div#accordion::-webkit-scrollbar {
        width: 6px;
    }
    .titleRight {
        margin-top: -2px;
    }
    .bootstrap-table {
        margin-left: 20px;
        margin-top: -9px;
    }
    button.btn.btn-primary.addtitbtn {
        float: right;
        margin-top: 2px;
        height: 25px;
        line-height: 6px;
    }
    .titlerbt {
        display: inline-block;
        font-size: 14px;
        color: #000000;
    }
    .titleTex{
        font-size: 14px;
        color: #000000;
        font-weight: normal;
    }
    .panel-heading.titlet {
        margin-top: -30px;
    }
    .panel-group .panel{
        border: 1px solid #cbcbcb;
        background-color: #ffffff;
        width: 258px;
        height: 35px;
        border-bottom: none;
        border-radius: 0;
    }
    .panel-group .panel+.panel {
        background-color: #ffffff;
        margin-top: 0;
        border: 1px solid rgb(221, 221, 221);
        border-bottom: none;
        border-radius: 0;
        width: 258px;
        height: 35px;
    }
    .panel-default>.panel-heading{
        background-color: #fff;
    }
    .panel-group .panel+.panel:last-of-type{
        border-bottom: 1px solid rgb(221, 221, 221);
    }
    .btn-primary{
        background-color:#4595ec;
        border-color:#4595ec;
    }
    .btn-primary:hover, .btn-primary:active, .btn-primary.hover{
        background: #61a8f5;
        border-color: #61a8f5;
    }
    .btn-primary.focus, .btn-primary:focus{
        background-color:#4595ec;
        border-color:#4595ec;
    }
    section.content-header {
        margin-top: 17px;
    }
</style>